<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <!-- <el-col :span="4">
          <el-select
            v-model="query.taskStatus"
            placeholder="请选择留样状态"
            clearable
          >
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col> -->
  <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            @change="picker"
            :clearable="false"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.sampleType"
            placeholder="请选择用餐对象"
            clearable
          >
            <el-option
              v-for="item in ['食材', '成品']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.meal"
            placeholder="请选择留样餐次"
            clearable
          >
            <el-option
              v-for="item in ['早餐', '早点', '午餐', '午点', '晚餐']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>

 <el-col :span="4">
          <el-select
            v-model="query.taskStatus"
            placeholder="请选择留样餐次"
            clearable
          >
            <el-option
              v-for='(item,index) in [{ text: "留样状态", value: "" },
      { text: "已留样", value: "1" },
      { text: "未留样", value: "0" },
      { text: "不需留样", value: "2" }]'
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>


         <!-- , -->
      
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">搜索</el-button>
        </el-col>
   
      </el-row>
      <rz-height></rz-height>

      <el-row>
           <el-col :span="2">
          <calendar classify="3" @view="viewMenu" name="留样日历"></calendar>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="taskDate" label="任务日期">
              <template slot-scope="scope">
     {{ scope.row.taskDate}}({{ scope.row.taskWeek}})
          </template> </el-table-column>
        <el-table-column prop="meal" label="用餐餐次"> </el-table-column>
        <el-table-column prop="sampleType" label="留样类型"> </el-table-column>
        <el-table-column prop="diners" label="用餐对象"> </el-table-column>
        <el-table-column prop="unblockTime" label="解封时间"> </el-table-column>
        <el-table-column prop="sampler" label="留样人"> </el-table-column>
        <el-table-column  label="留样状态"> 
            <template slot-scope="scope">
                 <div v-if="scope.row.taskStatus==0">暂未留样</div>
                <div v-else-if="scope.row.taskStatus==1">已留样</div>
                <div v-else>未留样原因:{{scope.row.completeExplain}}</div>


          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" v-if="scope.row.taskStatus==1" @click="viewMenu(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
      <rz-dialog
        :dialogVisible.sync="dialogVisible"
        :isShowConfirm="false"
        title="查看留样详情"
      >
        <el-form label-width="80px">



   <el-row>
          <el-col :span="12">
          <el-form-item label="留样日期"> {{ data.sampleTime }} </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="解封时间"> {{ data.unblockTime }} </el-form-item>
        
          </el-col>
        </el-row>





             <el-row>
          <el-col :span="12">
              <el-form-item label="完成时间">
            {{ data.completionDate }}
          </el-form-item>
            
          </el-col>
          <el-col :span="12">
        
          <el-form-item label="用餐对象">
            {{ data.diners }}
          </el-form-item>
          </el-col>
        </el-row>

             <el-row>
          <el-col :span="12">
           
               <el-form-item label="用餐餐次">
            {{ data.meal }}
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="留样类型">
            {{ data.sampleType }}
          </el-form-item>
       
          </el-col>
        </el-row>
           <el-row>
          <el-col :span="12">
         <el-form-item label="留样人"> {{ data.sampler }} </el-form-item>
          
          </el-col>
          <el-col :span="12">
          <el-form-item label="审核人"> {{ data.verifyer }} </el-form-item>

          </el-col>
        </el-row>
           <el-row>
          <el-col :span="12">
           <el-form-item label="加工人"> {{ data.processor }} </el-form-item>

          </el-col>
          <el-col :span="12">
                
          <el-form-item label="采样地址">
            {{ data.sampleAddress }}
          </el-form-item>
          </el-col>
        </el-row>
           <el-row>
        <el-col :span="12">
            <el-form-item label="备注"> {{ data.remark||'--' }} </el-form-item>
          </el-col>
        
        </el-row>
          <el-form-item label="留样图片">
            <el-image
              v-for="item in data.list"
              :key="item.id"
              style="width: 150px; height: 150px;margin-right:10px"
              :src="item.sampleImageUrl"
              fit="fill"
              :preview-src-list="[item.sampleImageUrl]"
            ></el-image>
          </el-form-item>
        </el-form>
      </rz-dialog>

      <!-- // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
      //:markDateMore=arr // 多种不同的标记
      //第一个标记和第二个标记不能同时使用
      // :agoDayHide='1514937600' //某个日期以前的不允许点击  时间戳10位
      // :futureDayHide='1525104000' //某个日期以后的不允许点击  时间戳10位
      // :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始 -->
    </el-card>
  </div>
</template>
<script>
import calendar from "@/views/enterprise/components/calendar";
import { QueryUnitSampleList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.query.startDate=this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
    this.query.endDate=this.$moment().format('YYYY-MM-DD')
    this.query.time=[this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),this.$moment().format('YYYY-MM-DD')]

    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      dialogVisible: false,
      query: {
        endDate: "",
        isPage: 0,
        meal: "",
        page: 1,
        pageSize: 10,
        sampleType: "",
        startDate: "",
        taskStatus: "",
        unitId: sessionStorage.getItem("interpretation"),
        time: [],
      },
      // taskList: [
      //   {
      //     text: "已留样",
      //     value: "1",
      //   },
      //   {
      //     text: "未留样",
      //     value: "0",
      //   },
      //   {
      //     text: "不需留样",
      //     value: "2",
      //   },
      // ],
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2021-01-01").getTime()
          );
        },
      },
      tableData: [],
      total: 0,
      data: {},
    };
  },
  // 方法
  methods: {
    picker(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    getList() {
      QueryUnitSampleList(this.query).then((res) => {
         res.data.forEach(x=> {
           for (const key in x) {
              if(!x[key]){
                x[key]='--'
              }
           }
         })
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    viewMenu(e) {
      this.data = e;
      this.dialogVisible = true;
    },
        tableRowClassName(e){
      console.log(e.row.taskWeek=='星期日');
      if(e.row.taskWeek=='星期日'||e.row.taskWeek=='星期六'){
         return 'warning-row';
      }else{
          return '';
      }
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    calendar,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container{
 /deep/ .el-table .warning-row {
    background: oldlace;
  }
}
</style>